<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio Button | Onsen UI</title>
  <link rel="stylesheet" href="../styles/app.css"/>
  <link rel="stylesheet" href="../../node_modules/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="../../node_modules/onsenui/css/onsen-css-components.css">

  <script src="../../node_modules/onsenui/js/onsenui.js"></script>
  <script src="../../node_modules/angular/angular.js"></script>
  <script src="../../dist/angularjs-onsenui.js"></script>
  <script>
    ons.bootstrap()
      .controller('PageController', function($scope) {
        $scope.name = 'green';
      });
  </script>

</head>

<body>
  <ons-page ng-controller="PageController">
    <ons-toolbar><div class="center">Radio Button</div></ons-toolbar>

    <p>Select your favorite color:<p>

    <label>
      <ons-radio ng-model="name" value="red"></ons-radio>
      Red
    </label><br/>
    <label>
      <ons-radio ng-model="name" value="green"></ons-radio>
      Green
    </label><br/>
    <label>
      <ons-radio ng-model="name" value="blue"></ons-radio>
      Blue
    </label><br/>

    <ons-input modifier="underbar" ng-model="name"></ons-input>

    <p>My favorite color is <strong>{{ name }}</strong>.</p>
  </ons-page>
</body>
</html>
